<link rel="stylesheet" href="../js/lay-module/ipInput/ipInput.css">
<style>
    .layuimini-main {
        display: flex;
        flex-wrap: wrap;
        height: 100%;
    }

    .layuimini-main>div {
        flex: 1;
        margin-right: 25px;
    }

    .ip-change-radio>div {
        margin: 0;
        padding: 10px 20px 5px 23px;
        color: #6b6b6b;
    }

    .layui-form fieldset {
        width: 85%;
    }

    .layuimini-main fieldset[disabled="disabled"] .layui-form-item {
        color: #c5c5c5;
    }

    .layuimini-main fieldset[disabled="disabled"] .layui-form-item input {
        -webkit-text-fill-color: #c5c5c5;
        border-color: #c5c5c5;
        cursor: no-drop;
    }

    .layuimini-main>div>fieldset legend {
        font-size: 20px;
        color: #454545;
        font-weight: 300;
    }

    .mac-input {
        height: 32px;
        line-height: 32px;
        border-color: #cccccc !important;
        width: 250px;
    }
</style>

<div class="layuimini-container layuimini-page-anim" style="height: calc(100% - 30px);">
    <div class="layuimini-main">
        <div>
            <fieldset class="table-search-fieldset" style="margin-top: 20px;">
                <legend>以太网配置（Ethernet 0）</legend>
                <form class="layui-form" action="" value="ethernet0" onsubmit="return false">
                    <div class="layui-form-item">
                        <label class="layui-form-label">生成内容框</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="configopt" autocomplete="off" value="eth0">
                            <input type="hidden" name="ID" autocomplete="off">
                            <textarea type="text" name="configstr" autocomplete="off" cols=84 rows=4></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block ip-change-radio">
                            <input type="radio" name="interest" id="r3" value="3" lay-filter="interest" title="不配置"
                                checked>
                            <input type="radio" name="interest" id="r1" value="1" lay-filter="interest"
                                title="使用动态IP地址">
                            <fieldset class="table-search-fieldset ethernet0">
                                <legend> <input type="radio" name="interest" id="r2" value="2" lay-filter="interest"
                                        title="静态IP地址"></legend>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">MAC地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="mac" lay-verify="mac" autocomplete="off" placeholder=""
                                            class="layui-input mac-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">IP地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="ip" lay-verify="ip" autocomplete="off" placeholder="请输入IP地址" class="layui-input"> -->
                                        <div id="ip"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">子网掩码</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="netmask" lay-verify="netmask" autocomplete="off" placeholder="请子网掩码" class="layui-input"> -->
                                        <div id="netmask"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">网关地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="gateway" lay-verify="gateway" autocomplete="off" placeholder="请输入网关地址" class="layui-input"> -->
                                        <div id="gateway"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">DNS地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="dns" lay-verify="title" autocomplete="off" placeholder="请DNS地址" class="layui-input"> -->
                                        <div id="dns"></div>
                                    </div>
                                </div>
                            </fieldset>
                            
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn input-disa-y" lay-submit lay-filter="saveSetting">保存设置</button>
                            <button name="init0" lay-event="reset" class="layui-btn layui-btn-primary">恢复默认</button>
                        </div>
                    </div>
                </form>
            </fieldset>
        </div>
        <div>
            <fieldset class="table-search-fieldset" style="margin-top: 20px;">
                <legend>以太网配置（Ethernet 1）</legend>
                <form class="layui-form" action="" value="ethernet1">
                    <div class="layui-form-item">
                        <label class="layui-form-label">生成内容框</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="configopt" autocomplete="off" value="eth1">
                            <input type="hidden" name="IDL" autocomplete="off">
                            <textarea type="text" name="configstr" autocomplete="off" cols=84 rows=4></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block ip-change-radio">
                            <input type="radio" name="interest" id="r32" value="3" lay-filter="interest" title="不配置"
                                checked>
                            <input type="radio" name="interest" id="r12" value="1" lay-filter="interest"
                                title="使用动态IP地址">
                            <fieldset class="table-search-fieldset ethernet1">
                                <legend> <input type="radio" name="interest" id="r22" value="2" lay-filter="interest"
                                        title="静态IP地址"></legend>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">MAC地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="macL" lay-verify="macL" autocomplete="off"
                                            placeholder="" class="layui-input mac-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">IP地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="ip" lay-verify="ip" autocomplete="off" placeholder="请输入IP地址" class="layui-input"> -->
                                        <div id="ipL"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">子网掩码</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="netmask" lay-verify="netmask" autocomplete="off" placeholder="请子网掩码" class="layui-input"> -->
                                        <div id="netmaskL"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">网关地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="gateway" lay-verify="gateway" autocomplete="off" placeholder="请输入网关地址" class="layui-input"> -->
                                        <div id="gatewayL"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">DNS地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="dns" lay-verify="title" autocomplete="off" placeholder="请DNS地址" class="layui-input"> -->
                                        <div id="dnsL"></div> <!-- nameserver -->
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="saveSetting">保存设置</button>
                            <button name="init1" lay-event="reset" class="layui-btn layui-btn-primary">恢复默认</button>
                        </div>
                    </div>
                </form>
            </fieldset>
        </div>
    </div>
</div>
<script src="../js/lay-module/ipInput/ipInput.js"></script>
<script src="../js/api.js" charset="utf-8"></script>
<script src="../js/ajaxRequest.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'util', 'jquery'], function () {
        var form = layui.form,
            util = layui.util,
            $ = layui.jquery;


        const isDisabledInput = (elem, bol) => {
            $(elem)[bol ? "attr" : "removeAttr"]("disabled", "disabled");
            // $.each($(elem).find("input.layui-input"), function(indes, item) {
            //     bol && $(item).removeAttr("lay-verify")
            // })
        };

        form.render();
        const ethernet0Input = {
            ip: [$('#ip').ipInput(), "请输入正确的IP地址"],
            netmask: [$('#netmask').ipInput(), "请输入正确的子网掩码"],
            gateway: [$('#gateway').ipInput(), "请输入正确的网关地址"],
            dns: [$('#dns').ipInput(), ""],
        };
        const ethernet1Input = {
            ip: [$('#ipL').ipInput(), "请输入正确的IP地址"],
            netmask: [$('#netmaskL').ipInput(), "请输入正确的子网掩码"],
            gateway: [$('#gatewayL').ipInput(), "请输入正确的网关地址"],
            dns: [$('#dnsL').ipInput(), ""],

        };
        form.on('submit(saveSetting)', function (data) {
            console.log("1", data)
            form.render();
            var d = data.field;
            d.ID = parseInt($("[name='ID']").val())
            if (d.configopt == "eth1") {
                d.mac = $("[name='macL']").val()
                d.ID = parseInt($("[name='IDL']").val())
            }
            //console.log('d', d) //id
            var inputList = $(data.form).attr("value") === "ethernet0" ? ethernet0Input : ethernet1Input;
            for (key in inputList) {
                var v = inputList[key][0].getIp();
                if (!v && inputList[key][1]) {
                    return layer.msg(inputList[key][1], {
                        icon: 2,
                    });
                }
                //console.log("key", key)
                // if(key==){
                //     mac:$("[name='macL']").val()
                // }
                d[key] = v

            };
            console.log('d2', d)
            if (d.interest == "2") {
                $($(data.form).find("textarea")).val(` ifconfig ${d.configopt} hw ether ${d.mac}\n ifconfig ${d.configopt} ${d.ip} netmask ${d.netmask}\n route add default gw ${d.gateway} ${d.configopt}`)
            }
            delete d.configstr;
            // console.log("dd", d)
            d.name = d.configopt
            d.type = parseInt(d.interest)

            var obj = { EthSetting: d }
            EditEthSetting(obj).then(function (responseData1) {
                //console.log('responseData1', responseData1)
                if (responseData1.code == 0) {
                    layer.msg("网络信息已更改，重启后生效", {
                        icon: 1,
                        time: 2000,
                    });
                }
            })
            return false;
        });
        util.event("lay-event", {
            reset: function (e) {
                $("input:radio[name=interest][value=2]").prop("checked", true);
                form.render('radio');
                var name = e[0].name
                isDisabledInput($($(e).parents("form")).find("fieldset"), false);
                if (name === 'init0') {
                    $("[name='mac']").val("08:00:27:00:01:00")
                    $('#ip').ipInput("192.168.0.100")
                    $('#netmask').ipInput("255.255.255.0")
                    $('#gateway').ipInput("192.168.0.1")
                    $('#dns').ipInput("8.8.8.8")
                } else {

                    $("[name='macL']").val("08:00:27:00:02:00")
                    $('#ip').ipInput("192.168.1.101")
                    $('#netmask').ipInput("255.255.255.0")
                    $('#gateway').ipInput("192.168.1.1")
                    $('#dns').ipInput("8.8.4.4")
                }

            }
        });

        form.on('radio(interest)', function (data) {
            console.log("interest", data)
            var elem = "";
            if (data.value === "1" || data.value === "3") {
                elem = $(data.elem).siblings("fieldset");
                $(elem).val("")
            }
            if (data.value === "2") {
                elem = $(data.elem).parents("fieldset");
            }
            isDisabledInput(elem, (data.value === "1" || data.value === "3"));
        });

        form.verify({
            mac: [
                /[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}/,
                "请输入正确的MAC地址"
            ]
        });
        //获取以太网信息
        loadData()
        function loadData() {
            GetEthSettin().then(function (responseData) {
                var data = responseData.data
                //console.log("data[0]", data[0])
                if (data != null) {
                    data.forEach(item => {
                        //console.log("item", item)
                        for (var key in item) {
                            keyLow = key.toLowerCase()
                            if (item.Name == "eth0") {
                                if (keyLow == "mac") {
                                    $("[name='mac']").val(item[key]);
                                } else if (keyLow == "id") {
                                    $("[name='ID']").val(item[key]);
                                } else if (keyLow != "id" && keyLow != "name" && keyLow != "type") {
                                    $('#' + keyLow + '').ipInput(item[key])
                                } else if (keyLow == "type") {
                                    $('#r' + item[key]).prop('checked', true);
                                    if (item[key] != "2") {
                                        var how1 = ".table-search-fieldset.ethernet0";
                                        isDisabledInput(how1, true);
                                    }
                                    form.render('radio');
                                }
                            } else {
                                if (keyLow == "mac") {
                                    $("[name='macL']").val(item[key]);
                                } else if (keyLow == "id") {
                                    $("[name='IDL']").val(item[key]);
                                } else if (keyLow != "id" && keyLow != "name" && keyLow != "type") {
                                    $('#' + keyLow + 'L').ipInput(item[key])
                                } else if (keyLow == "type") {
                                    $('#r' + item[key] + '2').prop('checked', true);
                                    if (item[key] != "2") {
                                        var how1 = ".table-search-fieldset.ethernet1";
                                        isDisabledInput(how1, true);
                                    }
                                    form.render('radio');
                                }
                            }

                        }
                    });

                }
            })
        }
    })
</script>